<template>
  <diy-container
    :tabbarIsShow="true"
    :status="'content'"
    :border-bottom="false"
    ref="container"
    title="有趣的我"
    :headerVisable="true"
    headerBackGroudColor="#ffffff"
  >
    <div class="wrapper">
      <view class="top">
        <view class="user-info">
          <u-avatar :src="userInfo.avatar" size="50"></u-avatar>
          <view class="info">
            <view class="name-wrapper">
              <text class="names">{{ `${userInfo.name}` }}</text>
              <text>{{ `${userInfo.checkStatus == 0 ? "(贷审核)" : ""}` }}</text>
            </view>
            <view class="id">
              {{ `相亲ID:${userInfo.name}` }}
              <u-icon name="file-text"></u-icon>
            </view>
            <view class="base-info">
              基础资料审核通过后才能被对方看到
              <text class="red">加快审核</text>
            </view>
          </view>
          <view class="btn" @click="toEdit">编辑资料</view>
        </view>
        <view class="count-wrapper">
          <view class="count-item" v-for="(item, index) in countList" :key="index">
            <view class="num">{{ item.value }}</view>
            <view>{{ item.label }}</view>
          </view>
        </view>
        <view class="member-wrapper">
          <view class="tooltip">
            <view>尚未开通会员</view>
            <view>会员权益：钥匙，通过钥匙可以查看TA的信息</view>
          </view>
          <view class="btn">开通服务</view>
        </view>
      </view>
      <view class="check-list">
        <view class="title">信息认证</view>
        <view>
          <view
            class="check-item"
            :key="index"
            v-for="(item, index) in checkTypeList"
            @click="toCertificationPage(item.url)"
          >
            <u--image :src="item.icon" width="80rpx" height="80rpx" radius="12"></u--image>
            <view class="text">{{ item.text }}</view>
          </view>
        </view>
      </view>
      <view class="follow-info">
        <u-avatar :src="followInfo.avatar"></u-avatar>
        <view class="center">
          <view class="name">{{ followInfo.name }}</view>
          <view>关注成功后可获得账号消息通知等全功能体验</view>
        </view>
        <view class="btn">关注</view>
      </view>
      <view class="tab-list">
        <view class="tab-item" v-for="(item, index) in tabList" :key="index">
          <view class="left">
            <u--image :src="item.icon" width="40rpx" height="40rpx"></u--image>
            <text>{{ item.name }}</text>
          </view>
          <view class="right">
            <text>{{ item.text }}</text>
            <u-icon name="arrow-right" size="12"></u-icon>
          </view>
        </view>
      </view>
    </div>
  </diy-container>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      // 审核状态 0待审核 1已审核
      userInfo: {
        avatar: require("@/static/images/avatar.png"),
        name: "www",
        id: "1234556",
        checkStatus: 0
      },
      countList: [
        {
          label: "我的关注",
          value: 0
        },
        {
          label: "关注我的",
          value: 0
        },
        {
          label: "谁看过我",
          value: 0
        },
        {
          label: "我看了谁",
          value: 0
        }
      ],
      checkTypeList: [
        {
          text: "实名认证",
          icon: require("@/static/images/real-name.png"),
          url: "/pages/information/real-name"
        },
        {
          text: "学历认证",
          icon: require("@/static/images/educational.png"),
          url: "/pages/information/qualification"
        },
        {
          text: "车认证",
          icon: require("@/static/images/car.png"),
          url: "/pages/information/castle"
        },
        {
          text: "房认证",
          icon: require("@/static/images/room.png"),
          url: "/pages/information/house"
        }
      ],
      followInfo: {
        avatar: require("@/static/images/avatar.png"),
        name: "大柳州小红娘公众号"
      },
      tabList: [
        {
          name: "我的相册",
          icon: require("@/static/images/avatar.png"),
          text: "去上传照片，展示更多维的你"
        },
        {
          name: "三观问答",
          icon: require("@/static/images/avatar.png")
        },
        {
          name: "爱情语录",
          icon: require("@/static/images/avatar.png")
        },
        {
          name: "我的礼物",
          icon: require("@/static/images/avatar.png")
        },
        {
          name: "专属红娘",
          icon: require("@/static/images/avatar.png")
        },
        {
          name: "全民合伙人",
          icon: require("@/static/images/avatar.png")
        },
        {
          name: "隐私设置",
          icon: require("@/static/images/avatar.png")
        },
        {
          name: "用户协议",
          icon: require("@/static/images/avatar.png")
        }
      ]
    };
  },
  computed: {},
  methods: {
    toCertificationPage(url) {
      uni.navigateTo({
        url
      });
    },
    toEdit() {
      uni.navigateTo({
        url: "/pages/information/information"
      });
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.wrapper {
  width: 100%;
  padding: 32rpx;
  box-sizing: border-box;
  background-color: #f0f0f1;
  background-image: url("../../static/images/user-bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.top {
  width: 100%;
  box-sizing: border-box;
  font-size: 20rpx;
  font-family: PingFang SC-Medium, PingFang SC;

  .user-info,
  .count-wrapper {
    display: flex;
    justify-content: space-between;
  }

  .user-info {
    .info {
      margin-left: 12rpx;
      line-height: 36rpx;

      .name-wrapper {
        .names {
          font-weight: 600;
          font-size: 32rpx;
        }
      }

      .id {
        font-weight: 600;
        display: flex;
      }

      .base-info {
        color: #9899af;

        .red {
          display: inline-block;
          margin: 0 10rpx;
          color: #f17f8f;
        }
      }
    }

    .btn {
      background-color: #f38597;
      font-size: 20rpx;
      height: 50rpx;
      text-align: center;
      line-height: 50rpx;
      padding: 8rpx 16rpx;
      color: #ffffff;
      width: 120rpx;
      border: 4rpx #ffffff solid;
      border-radius: 40rpx;
    }
  }

  .count-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .count-item {
      width: 15%;
      height: 100rpx;
      text-align: center;

      .num {
        font-weight: 600;
        font-size: 28rpx;
      }
    }
  }

  .member-wrapper {
    width: 100%;
    background-color: #0e0f25;
    height: 160rpx;
    border-radius: 30rpx;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .tooltip {
      color: #ffffff;

      view:nth-child(1) {
        font-weight: 600;
        font-size: 32rpx;
        line-height: 64rpx;
      }
    }

    .btn {
      width: 60rpx;
      height: 60rpx;
      background-color: #f5e1bd;
      padding: 16rpx;
      text-align: center;
      border-radius: 50%;
      border: 8rpx solid #655f5b;
      color: #403d3c;
      font-weight: 600;
    }
  }
}

.check-list {
  width: 100%;
  margin-top: 40rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding-bottom: 20rpx;

  .title {
    margin-left: 40rpx;
    padding: 20rpx 0;
    font-weight: 600;
    font-size: 28rpx;
  }

  view:nth-child(2) {
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-size: 20rpx;

    .check-item {
      width: 16%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10rpx;

      .text {
        text-align: center;
        margin-top: 8rpx;
        font-size: 20rpx;
      }
    }
  }
}

.follow-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20rpx;
  margin-top: 40rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;

  .center {
    width: 60%;
    padding-left: 10rpx;

    .name {
      font-weight: 600;
      line-height: 48rpx;
    }

    view:nth-child(2) {
      color: #bcb7b6;
    }
  }

  .btn {
    border: 2rpx solid #f7b8ba;
    color: #f7b8ba;
    width: 80rpx;
    height: 30rpx;
    padding: 8rpx;
    text-align: center;
    border-radius: 10rpx;
  }
}

.tab-list {
  width: 100%;
  margin-top: 40rpx;
  background-color: #ffffff;
  border-radius: 20rpx;

  .tab-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 24rpx;

    .left,
    .right {
      display: flex;
      align-items: center;

      text {
        display: inline-block;
        margin-left: 16rpx;
      }
    }
    .right {
      text {
        color: #f17f8f;
      }
    }
  }
}
</style>
